import React, { useEffect, useState } from 'react'
import { Modal, Table, Form, Input, Button } from 'antd'
import { ColumnProps } from 'antd/lib/table'
import ItemModal from '~/components/item-modal'

let cacheRecord: any = {}

const columns = ({ setModalVisible }: any): ColumnProps<any>[] => [
  {
    title: '序号',
    dataIndex: 'id',
    align: 'center',
    render: (_: any, record: any, index: number) => <div>{index + 1}</div>
  },
  {
    title: '物品编号',
    dataIndex: 'serialNo',
    align: 'center',
    render: (serialNo: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {serialNo}
      </a>
    )
  },
  {
    title: '物品名称',
    dataIndex: 'itemName',
    align: 'center',
    render: (itemName: any, record: any) => (
      <a
        onClick={() => {
          cacheRecord = record
          setModalVisible(true)
        }}
      >
        {itemName}
      </a>
    )
  },
  {
    title: '数量(单位)',
    dataIndex: 'itemStock',
    align: 'center',
    render: (itemName: any, record: any) => (
      <div>
        {record.itemStock.totalNumber} ({record.itemStock.unitName})
      </div>
    )
  },
  {
    title: '规格',
    align: 'center',
    dataIndex: 'specs'
  },
  {
    title: '特征',
    align: 'center',
    dataIndex: 'feature'
  },
  {
    title: '备注',
    align: 'center',
    dataIndex: 'remark'
  }
]

const PropertySelect = ({
  setSelectVisible,
  visible,
  castItems,
  setSelectedItems,
  selectedItems,
  handleGetCastItems
}: any) => {
  const [form] = Form.useForm()
  const [selectArr, setSelectArr] = useState([])
  const [modalVisible, setModalVisible] = useState(false)
  const { resetFields } = form
  const rowSelection = {
    selectedRowKeys: selectArr.map((item: any) => item.serialNo),
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      setSelectArr(selectedRows)
    }
  }

  useEffect(() => {
    setSelectArr(selectedItems)
  }, [selectedItems])

  const onClickSaveItems = () => {
    setSelectedItems(selectArr)
    setSelectVisible(false)
  }

  return (
    <div>
      <Modal
        width={958}
        visible={visible}
        onCancel={() => {
          setSelectVisible(false)
        }}
        onOk={onClickSaveItems}
      >
        <Form
          validateTrigger="onBlur"
          layout="inline"
          form={form}
          style={{ marginBottom: 16 }}
          onFinish={handleGetCastItems}
        >
          <Form.Item name="itemNo" label="物品编号：">
            <Input placeholder="请输入物品编号搜索" />
          </Form.Item>
          <Form.Item name="itemName" label="物品名称：">
            <Input placeholder="请输入物品名称搜索" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="primary">
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              onClick={() => {
                resetFields()
                handleGetCastItems()
              }}
              type="link"
              style={{ padding: 0 }}
            >
              清空选项
            </Button>
          </Form.Item>
        </Form>
        <Table
          rowKey="serialNo"
          pagination={{
            size: 'default',
            total: castItems.length,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: total => `共 ${total} 条`
          }}
          dataSource={castItems}
          rowSelection={rowSelection}
          columns={columns({ setModalVisible })}
          bordered
        ></Table>
      </Modal>
      <ItemModal visible={modalVisible} setVisible={setModalVisible} record={cacheRecord} />
    </div>
  )
}

export default PropertySelect
